<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--layui.css-->
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <!--360等浏览器使用webkit内核-->
    <meta name="renderer" content="webkit">
    <title>毕业设计管理系统 | 主页</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin" id="select_role">
    <div class="layui-header">
        <div class="layui-logo">毕业设计管理系统</div>
        <ul class="layui-nav layui-layout-left">
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="#">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        {{user_name}}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <!--<dd><a href="">安全设置</a></dd>-->
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/logout">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域-->
            <ul class="layui-nav layui-nav-tree layui-inline"  lay-filter="test" style="margin-top: 10px;" v-for="(value,name) in permissionList">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">{{value.permissionName}}
                        <span class="layui-nav-more"></span>
                    </a>
                    <dl class="layui-nav-child" v-for="(cvalue,cname) in value.childPermission">
                        <dd><a href="#"  @click="getHtml(cvalue.url)">{{cvalue.permissionName}}</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body" id="layui-body">
        <!-- 内容主体区域 -->
    </div>

    <!--<div class="layui-footer">-->
        <!--&lt;!&ndash; 底部固定区域 &ndash;&gt;-->
        <!--© www.crud4j.top - ZhangKaiQiang 版权所有-->
    <!--</div>-->
</div>
<script src="/static/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="/static/layui/layui.js" type="text/javascript"></script>
<script src="/static/js/ajax.js"></script>
<!--vue.js开发版本-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--vue生产版本-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    layui.use('element', function(){
        var element = layui.element;

    });

    // 这里只能使用ajax请求后台得到用户的权限信息，使用HTML时无法得到ModelandView中的数据
    var select=new Vue({
        el: '#select_role',
        data: {
            user_name:'',
            permissionList:''
        },created: function () {
           this.getUserInfo();
            this.$forceUpdate();
        },methods:{
            // 获得用户信息
            getUserInfo:function () {
                var _this = this;
                postAJAX("GET","/api/v1/user/user",null,null,function (data){
                    _this.user_name=data.data.userName;
                    _this.permissionList=data.data.permissions;
                    $("#nav").find('span.layui-nav-bar').remove();
                });
            },
            // 加载不同页面
            getHtml:function (uri) {
                $.get(uri,null,(res)=>{
                    $("#layui-body").html(res);
                })
            }

        }
    });

    // 动态添加导航时不能点击展开与收起,通过先移除span.layui-nav-bar,等到循环产生后再重新渲染即可
    window.addEventListener("load",()=>{
        layui.use('element', function () {
            var element = layui.element;
            var layFilter = $("#nav").attr('lay-filter');
            element.render('nav', layFilter);
        });
    },false);
</script>
</body>
</html>